<template>
	<view class="container">
		<view >
			<Masks  v-if="show_mask"  @hideClick="hideMask()" :background="cp_background"></Masks>
			<!-- 头像及其他 -->
			<view class="avatar">
				<view class="left-avatar" @click="toLeader(user_shop)">
					<image :src="user_shop.avatar"></image>
					<text class="name">{{user_shop.nickname}}</text>
					<text class="cell-icon yticon icon-you" style="margin: 8rpx 0rpx 0rpx 6rpx;font-size: 28rpx;"></text>
				</view>
				<view v-if="user_shop.is_subscribe==0" @click="subscribe(1,user_shop)" class="right-copy"><text class="cell-icon yticon icon-jia1 add_btn"></text><text class="dingyue">订阅</text></view>
				<view v-else class="right-copy had" @click="subscribe(2,user_shop)"><text class="dingyue">已订阅</text></view>
			</view>
			<!-- 接龙标题 -->
			<view class="title">
				<view style="margin: 30rpx 30rpx 0rpx 30rpx;padding: 30rpx 0rpx;font-size: 36rpx; font-weight: 800;">{{drag_info.title}}</view>
				<view style="height: 2rpx;background: #ccc;margin:0rpx 20rpx;opacity: 0.3;"></view>
				<view style="margin: 30rpx;font-size: 28rpx;">
					{{drag_info.description}}
				</view>
				<list-cell icon="icon-address" @eventClick="toLocation()" :background="_background" iconColor="#31AA69" :show_icon="false"  :title="drag_info.address" border="diy-cell-class" ></list-cell>
				<view class="disflex" style="margin: 0rpx 30rpx;padding: 10rpx 0rpx;">
					<view style="flex: 1;font-size: 26rpx;">发布时间</view>
					<view style="color: #999999;font-size: 26rpx;">{{drag_info.created_at}}</view>
				</view>
				<view class="disflex" style="margin: 0rpx 30rpx;padding: 10rpx 0rpx 34rpx 0rpx;">
					<view style="flex: 1;font-size: 26rpx;">活动时间</view>
					<view style="color: #999999;font-size:26rpx">{{drag_info.start_time}} 至 {{drag_info.end_time}}</view>
				</view>
			</view>
			<!-- 商品列表 -->
			<view class="goods" >
				<view class="pd-20 b-bottom margin-20" style="display: flex;">
					<view style="flex: 1;">接龙商品({{drag_info.goods_list&&drag_info.goods_list.length}})</view>
					<view class="copy_btn" v-if="drag_info.can_copy==0" @click="copyDrag()">复制该接龙</view>
				</view>
				<view class="disflex" :class="index!=drag_info.goods_list&&drag_info.goods_list.length-1?'b-bottom':''" style="margin: 20rpx;padding-bottom: 20rpx;" v-for="(item,index) in drag_info.goods_list" :key="index">
					<view style="position: relative;width: 216rpx;height: 216rpx;" @click="readMedia(index)">
						<image v-if="item.pics[0].type==1"  style="height: 216rpx;width: 216rpx;border-radius: 10rpx;"  :src="item.pics[0].src"></image>
						<video v-else :src="item.pics[0].src" style="height: 216rpx;width: 216rpx;border-radius: 10rpx;"  :controls="false" :show-center-play-btn="false"></video>
						<view class="pic_num">{{item.pics.length}}张</view>
						<text v-if="item.pics[0].type==2" class="cell-icon yticon icon-player player" ></text>
					</view>
					<view class="goods-list">
						<view class="goods-title">{{item.title}}</view>
						<view style="color: #999999;font-size: 28rpx;margin-top: 20rpx;">余量：{{item.store}}</view>
						<view class="disflex" style="margin-top: 20rpx;">
							<view class="goods-price">￥{{item.price}}</view>
							<view class="disflex" style="align-items: center;" v-if="item.store>0">
								<image src="/static/temp/des.png" @click="desNum(index)"></image>
								<view class="goods-num" @click="showKeyboard(index)">{{item.num}}</view>
								<image src="/static/temp/add2.png" @click="addNum(index)"></image>
							</view>
							<view v-else><image src="/static/temp/add1.png"></image></view>
						</view>
					</view>
				</view>
			</view>
			<uv-keyboard ref="keyboard" mode="number" @change="change" @backspace="backspace" dot-disabled="false" :showCancel="false" :showConfirm="false" :tooltip="false" ></uv-keyboard>
			<!-- 接龙列表 -->
			<view class="bottom-list">
				<view class="navbar">
					<view v-for="(item, index) in navList" :key="index" class="nav-item" v-if="item.show==1" 	@click="tabClick(item.state)">
						<view class="child_item"  :class="{current: tabCurrentIndex === index}">{{item.text}}({{item.num}})</view>
					</view>
					
				</view>
				<view v-if="list.length<=0" class="empty-order">
					<text v-if="tabCurrentIndex==0">还没有人接龙，快去分享接龙吧</text>
					<text v-else>暂无数据</text>
				</view>
				<view class="record">
					<view :class="index!=list.length-1?'b-bottom':''" class="order-list" v-for="(_item,index) in list" :key="index">
						<view style="display: flex;">
							<view style="margin: 10rpx;">{{_item.dragon_serial}}</view>
							<image class="order-image" :src="_item.user_info.avatar"></image>
							<view style="margin: 10rpx;">{{_item.user_info.nickname}}</view>
							<view style="margin: 10rpx;color: #999999;">{{_item.time_str}}</view>
						</view>
						<view class="list-goods-tit" :key="_index" v-for="(goods,_index) in _item.goods_snap" v-if="goods.num>0"><text>{{goods.title}}</text> <text class="list-goods-num">+{{goods.num}}</text></view>
						<view class="remark" v-if="drag_info&&drag_info.single_can==1&&tabCurrentIndex==1&&_item.remark!=''">接龙备注:{{_item.remark}}</view>
						<view style="padding-left: 100rpx;display: flex;margin-top: 30rpx;color: #999999;">
							
							<view style="flex: 1;">共{{_item.total_num}}件，合计：<text style="color:#FA6401;">￥{{_item.price_real}}</text></view>
							<view v-if="tabCurrentIndex==1">
								<view v-if="_item.status==-1" class="hui">已取消</view>
								<view v-if="_item.status==0&&_item.verify==1" class="bai" @click="cancelOrder(_item.id,index)">取消</view>
								<view v-if="_item.status==0&&_item.verify==2" class="hui">已核销</view>
							</view>
							<view v-if="(tabCurrentIndex==0||tabCurrentIndex==2)&&_item.can_op==1">
								<view v-if="_item.status==0&&_item.verify==1"  class="lu" @click="verifyOrder(_item.id,index)">核销</view>
								<view v-if="_item.status==0&&_item.verify==2" class="hui">已核销</view>
							</view>
							
						</view>
					</view>
					<view class="more" v-if="more_data" @click="loadList()">
						<text style="color: #666666;">查看更多</text>
						<image src="/static/temp/down.png" style="width: 32rpx;height: 32rpx;margin-left: 10rpx;"></image>
					</view>
					<view class="more" v-if="!more_data&&list.length>=5" @click="collspanList()">
						<text style="color: #666666;">折叠列表</text>
						<image src="/static/temp/down.png" style="width: 32rpx;height: 32rpx;margin-left: 10rpx;transform: rotate(180deg);"></image>
					</view>
				</view>
			</view>
			<view class="bottom-op" >
				<view class="bottom-left" v-if="drag_info&&drag_info.single_can==1" @click="showOpMenu(drag_info)">
					<image src="/static/temp/manage.png" style="width: 48rpx;height: 48rpx"></image>
					<view>接龙管理</view>
				</view>
				<view class="bottom-left" v-else @click="toRecord()">
					<image src="/static/tab-record.png" style="width: 48rpx;height: 48rpx"></image>
					<view>接龙记录</view>
				</view>
				<view class="mar-left-20">
					<view class="share" @click="openShare()">分享接龙</view>
				</view>
				<view v-if="drag_info.status_val==1" class="mar-left-20" @click="navTo()"><view class="order-btn" style="background: rgba(35 ,169, 72);">我要接龙</view></view>
				<view v-if="drag_info.status_val==2" class="mar-left-20"><view class="order-btn" style="background: rgba(35 ,169, 72,0.6);">接龙已结束</view></view>
				<view v-if="drag_info.status_val==3" class="mar-left-20"><view class="order-btn" style="background: rgba(35 ,169, 72,0.6);">接龙未开始</view></view>
			</view>
			
			<view v-show="show_menu" class="bottom_menu" :style="{zIndex:_zindex}">
				<view class="op_menu_child" @click="editDrag()">编辑接龙</view>
				<view class="op_menu_child" @click="endDrag()" v-if="drag_info&&drag_info.purchase_status==0">结束接龙</view>
				<view class="op_menu_child" @click="copyTo()" v-if="can_copy==0">复制接龙</view>
				<view class="op_menu_child" @click="deleteDrag()">删除接龙</view>
				<view class="op_menu_child" @click="toExport()">数据统计</view>
				<view class="op_menu_child" @click="exportData()">导出数据</view>
				<view class="op_menu_child" @click="showOpMenu()">取消</view>
			</view>
			<view class="safe-area" :style="{zIndex:_zindex}"></view>
			<view v-if="show_mask&&show_media"  class="media">
				<swiper  circular @change="changeSwiper" style="height: 100%;">
					<swiper-item v-for="(item,index) in swiperList" :key="index">
							<image v-if="item.type==1" :src="item.src" mode="widthFix" style="width: 100%;"></image>
							<view  v-if="item.type==2" style="text-align: center;">
								<video :src="item.src" :id="'myVideo_' + index" style="width: 100%;"  show-progress="false" show-mute-btn="true"	   :show-center-play-btn="true"></video>
							</view>
							
					</swiper-item>
				</swiper>
				<text class="cell-icon yticon icon-jia1 close" style="width: 60rpx; height: 60rpx; font-size: 26rpx; line-height: 60rpx;z-index: 3;" @click="closeMedia()"></text>
			</view>
			
			<!-- 分享 -->
			
			<view v-if="show_share"  class="bottom_menu" style="background: #F5F5F5;z-index: 3;">
				<view class="share-list">
					<view class="share-item" @click="openCard()">
						<image src="/static/temp/share_wechat.png" ></image>
						<text>分享到微信</text>
					</view>
					<view class="share-item" @click="openPoster()">
						<image src="/static/temp/share_moment.png" ></image>
						<text>生成发圈海报</text>
					</view>
				</view>
				<view class="bottom-btn-share b-t" @click="cancelShare()">取消</view>
				
			</view>
			<!-- 分享卡片 -->
			<view v-if="show_card" style="position: fixed; z-index: 3; left: 0; right: 0;top: 5%;text-align: center; color: #FFFFFF; padding: 20rpx; font-size: 32rpx; font-weight: 800;">分享卡片预览</view>
			<view v-if="show_card" class="share_card">
				
				<view style="display: flex;align-items: center;	padding: 30rpx;">
					<image src="/static/temp/kt.png" style="width: 48rpx;height: 48rpx;"></image>
					<text style="padding: 0rpx 10rpx;color: #333333;font-size: 28rpx;">好团团接龙</text>
				</view>
				<view style="padding: 0rpx 30rpx;">{{share_data[0].title}}</view>
				<swiper style="height: 560rpx;margin: 20rpx " @change="changeShare" :indicator-dots="true" indicator-active-color="#23A948">
					<swiper-item v-for="(item,index) in share_data" :key="index">
						<image :src="item.share_img"  mode="aspectFit"></image>
					</swiper-item>
				</swiper>
				<view style="margin: 30rpx;">
					<button style="height: 70rpx;line-height: 70rpx;background: #23A948;color:#FFFFFF;font-size: 28rpx;"  open-type="share">立即分享</button>
				</view>
			</view>
			<view v-if="show_poster" style="position: fixed; z-index: 3; left: 0; right: 0;top: 0;text-align: center; color: #FFFFFF; padding: 20rpx; font-size: 32rpx; font-weight: 800;">分享海报预览</view>
			<view v-if="show_poster" style="position: fixed;top: 4%;left: 0;right: 0;margin: 20rpx;z-index: 3;text-align: center;">
				<image style="height: 900rpx;" show-menu-by-longpress :src="share_poster" mode="heightFix"></image>
				<view style="margin:12rpx 40rpx;">
					<button style="height: 70rpx;line-height: 70rpx;background: #23A948;color:#FFFFFF;font-size: 28rpx;" @click="savePic(share_poster)">保存图片</button>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import Masks from '@/components/mask';
	import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js'
	import {mapMutations,mapState} from 'vuex';
	import Api from '@/common/api';
	import UploadApi from '@/common/upload';
	export default{
		components: {
			Masks
		},
		data(){
			return {
				show_media:false,
				show_share:false,
				show_card:false,
				show_menu:false,
				show_mask:false,
				show_poster:false,
				user_shop:{},
				leader_id:0,
				dragon_id:0,
				list:[],
				page: 1,
				size: 5,
				more_data: true,
				tabCurrentIndex: 0,
				show_no_permission:true,
				shop_info:{},
				_background:'rgba(35,169,72,0.1)',
				address:'',
				navList: [{
						state: 0,
						text: '接龙列表',
						num:0,
						show:1
					},
					{
						state: 1,
						text: '我参与的',
						num:0,
						show:1
					},
					{
						state: 2,
						text: '待核销',
						num:0,
						show:1
					}
				],
				drag_info:{},
				number_index:0,
				swiperPicIndex:0,
				swiperList:[],
				videoList:[],
				share_data:{},
				cp_background:'',
				current_share:{},
				_zindex:2,
				share_poster:'',
				can_copy:0
			}
		},
		onLoad(option){
		},
		computed: {
			...mapState(['hasLogin']),
			
		},
		onShow(){
			this.show_menu=false;
			if(!this.show_share){
				this.show_mask=false	
			}
			;
			let option=this.$api.currentPageOption();	
			this.dragon_id = option.id;
			this.leader_id=option.leader_id;
			//店铺信息
			this.userShop();
			//团购信息
			this.loadDetail();
			//接龙用户列表
			this.page=1;
			this.more_data=true;
			this.list=[];
			this.loadList();
			this.loadStatics();
			this.addView()
		},
		onShareAppMessage(res){
			return {
				title:this.current_share.title,
				path:'/pages/record/detail?id='+this.current_share.dragon_id+'&leader_id='+this.current_share.user_id,
				imageUrl:this.current_share.share_img,
				
			}
			
		},
		onShareTimeline(){
			return {
				title:this.current_share.title,
				path:'/pages/record/detail?id='+this.current_share.dragon_id+'&leader_id='+this.current_share.user_id,
				imageUrl:this.current_share.share_img,
				
			}
		},
		onReachBottom(){
		},
	
		methods: {
			...mapMutations(['login']),
			copyDrag(){
				let item =this.drag_info;
				item.id =0;
				let that=this;
				uni.setStorage({
					key:'edit_drag',
					data:that.saveItemOption(item)
				})
				uni.switchTab({
					url:'/pages/index/create'
				})
			},
			savePic(url){
				let that =this;
				uni.downloadFile({
					url:url,
					success:((res)=>{
						uni.saveImageToPhotosAlbum({
							filePath:res.tempFilePath,
							fail:((err)=>{
								that.$api.msg(`保存图片失败`)
							}),
							complete:(()=>{
								that.$api.msg(`图片已保存`)
								that.hideMask()
							})
						})
					}),
					fail:((err)=>{
						that.$api.msg(`保存图片失败`)
					})
				})
				
			},
			async openPoster(){
				this.show_card=false;
				this.show_poster=true;
				let data = await Api.apiCall('post',Api.apiName.create_share_poster,{dragon_id:this.dragon_id});
				if(!data){
					return;
				}
				this.share_poster=data.data;
			},
			cancelShare(){
				this.show_mask=false;
				this.show_share=false;
				this.show_card=false;
				this.show_poster=false;
			},
			openShare(){
				this.show_mask=true;
				this.show_share=true;
				this.cp_background='';
				this._zindex=3;
			},
		    async openCard(){
				this.show_card=true;
				this.show_poster=false;
				this.cp_background='';
				let data = await Api.apiCall('post',Api.apiName.create_share_card,{dragon_id:this.dragon_id});
				if(!data){
					return;
				}
				this.share_data =data.data;
				if(data.data.length>0){
					this.current_share =data.data[0]
				}
			},
			changeShare(e){
				this.current_share = this.share_data[e.detail.current]
			},
			changeSwiper(e){
				let aa = e.detail.current==0?e.detail.current:e.detail.current-1;
				if(this.videoList.length>0){
					this.videoList.forEach((item)=>{
						item.pause();
					})
				}
				uni.setNavigationBarTitle({
					title:(e.detail.current+1)+'/'+this.swiperList.length
				})
			},
			showKeyboard(index){
				this.number_index=index;
				this.$refs.keyboard.open();
			},
			// 按键被点击(点击退格键不会触发此事件)
			change(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				let str=this.drag_info.goods_list[this.number_index].num.toString();
				str = str.charAt(0) === '0' ? str.slice(1) : str;
				str+=val.toString();
				if(parseInt(str)>parseInt(this.drag_info.goods_list[this.number_index].store)){
					this.$api.msg(`库存不足`);
					return;
				}
				this.drag_info.goods_list[this.number_index].num=str;
			},
			// 退格键被点击
			backspace() {
				// 删除最后一个字符
				let str =this.drag_info.goods_list[this.number_index].num;
				if (str.length) str = str.substr(0, str.length - 1);
				this.drag_info.goods_list[this.number_index].num=str.length>0?str:'0';
			},
			async addView(){
				let params = {
					dragon_id:this.dragon_id,
				};
				await Api.apiCall('post',Api.apiName.add_dragon_view,params,true,false);
			},
			async subscribe(type,item){
				let params = {
					s_id:item.id,
				};
				let data = await Api.apiCall('post',Api.apiName.subscribe,params,true);
				if(!data){
					return;
				}
				if(type==1){
					this.$api.msg(`订阅成功`)
				}else{
					this.$api.msg(`已退订`)
				}
				this.user_shop.is_subscribe=type==1?1:0; 
			},
			readMedia(index){
				this._zindex=2;
				this.show_mask=true;
				this.show_media=true;
				this.cp_background='rgba(0,0,0,1)';
				this.swiperPicIndex=index;
				this.swiperList=this.drag_info.goods_list[index].pics;
				this.swiperList.forEach((item,index)=>{
					if(item.type==2){
						this.videoList.push(uni.createVideoContext('myVideo_'+index));
					}
				})
				uni.setNavigationBarTitle({
					title:'1/'+this.swiperList.length
				})
			},
			
			closeMedia(){
				this.show_mask=false;
				this.show_media=false;
				this.videoList=[];
				uni.setNavigationBarTitle({
					title:'接龙详情'
				})
				this.cp_background=''
			},
			addNum(index){
				if(this.drag_info.goods_list[index].num<this.drag_info.goods_list[index].store){this.drag_info.goods_list[index].num++;}
				
			},
			desNum(index){
				if(this.drag_info.goods_list[index].num>0){this.drag_info.goods_list[index].num--;}
			},
			async userShop(){
				let data = await Api.apiCall('get',Api.apiName.user_shop_info,{user:this.leader_id},true);
				if(!data){
					return;
				}
				this.user_shop = data.data;
			},
			async loadDetail(){
				let data = await Api.apiCall('get',Api.apiName.purchase_detail,{id:this.dragon_id});
				if(!data){
					return;
				}
				this.drag_info = data.data;
				if(data.data.show_verify==0){
					this.navList[2].show=0;
				}
			},
			async loadStatics(){
				let data = await Api.apiCall('get',Api.apiName.drag_detail_statics,{dragon_id:this.dragon_id});
				if(!data){
					return;
				}
				this.navList[0].num=data.data.jllb;
				this.navList[1].num=data.data.wcyd;
				this.navList[2].num=data.data.dhx;
			},
			async loadList(){
				if(!this.more_data){
					return;
				}
				let params = {
					dragon_id:this.dragon_id,
					page: this.page,
					size: this.size,
				};
				if(this.tabCurrentIndex==0){params.is_normal=1}
				if(this.tabCurrentIndex==1){params.is_attempt=1}
				if(this.tabCurrentIndex==2){params.to_verify=1}
				let data = await Api.apiCall('get',Api.apiName.order_lists,params,true);
				if(!data){
					this.loaded = true;
					//没有数据不请求或防止重复加载
					return;
				}
				this.navList[this.tabCurrentIndex].num=data.data.total;
				this.loaded = false;
				this.list = this.list.concat(data.data.list)
				if (data.data.list.length > 0 && data.data.list.length == this.size) {
					this.page++;
				} else {
					this.more_data = false;
				
				}
			},
			navTo(){
				if(!this.hasLogin){
					uni.navigateTo({
						url:'/pages/public/wxLogin'
					})
					return;
				}
				const date = new Date();
				let currentTimeSecond =parseInt(date.getTime()/1000);
				if(currentTimeSecond<this.drag_info.start_time_second){this.$api.msg(`接龙未开始`);return}
				if(currentTimeSecond>this.drag_info.end_time_second||this.drag_info.status_val==2){this.$api.msg(`接龙已结束`);return}
				let totalTemp=0;
				try{
					this.drag_info.goods_list.forEach((item,index)=>{
						totalTemp+=item.num;
					})
					if(totalTemp==0){throw '请选择接龙的商品';}
				}catch(err){
					this.$api.msg(err);
					return;
				}
				let param ={drag_id:this.drag_info.id}
				let checks =[];
				this.drag_info.goods_list.forEach((item)=>{
					let obj= {goods_id:item.id,num:item.num}
					checks.push(obj)
				})
				param.check_goods=checks;
				uni.navigateTo({
					url:'/pages/order/confirm?param='+JSON.stringify(param)
				})
			},
			toLeader(item){
				uni.navigateTo({
					url:'/pages/index/lists?id='+item.id+'&name='+item.nickname
				})
			},
			toLocation(){
				let that =this;
				uni.openLocation({
					latitude:that.drag_info.latitude*1,
					longitude:that.drag_info.longitude*1,
					name:that.drag_info.address,
					scale:16
				})
			},
			// 重置列表加载数据
			resetListParam(){
				this.list=[];
				this.page=1;
				this.more_data=true;
			},
			tabClick(index){
				if(index==1&&!this.hasLogin){
					uni.navigateTo({
						url:'/pages/public/wxLogin'
					});
					return;
				}
				this.tabCurrentIndex = index;
				this.resetListParam();
				this.loadList();	
			},
			collspanList(){
				this.page=1;
				this.more_data=true;
				this.list=[];
				this.loadList();
			},
			toRecord(){
				if(!this.hasLogin){
					uni.navigateTo({
						url:'/pages/public/wxLogin'
					});
					return;
				}
				uni.switchTab({
					url:'/pages/record/index'
				})
			},
			showOpMenu(item=0){
				let that = this;
				this.show_mask=!this.show_mask;
				this.show_menu=!this.show_menu;
				this._zindex=3;
				
				if(item!=0){
					this.can_copy=item.can_copy;
					uni.setStorage({
						key:'edit_drag',
						data:that.saveItemOption(item)
					})
				}
				
			},
			saveItemOption(item){
				return {address:item.address,cluster_id:item.cluster_id,description:item.description,end_time:item.end_time,start_time:item.start_time,goods_list:item.goods_list,id:item.id,latitude:item.latitude,longitude:item.longitude,send_msg:item.send_msg,title:item.title,user_id:item.user_id,can_copy:item.can_copy}
			},
			hideMask(){
				this.show_mask=false;
				this.show_menu=false;
				this.show_media=false;
				this.show_share=false;
				this.show_card=false;
				this.show_poster=false;
			},
			copyTo(){
				let editDrag = uni.getStorageSync('edit_drag')||'';
				if(editDrag){
					editDrag.id=0;
					uni.setStorage({
						key:'edit_drag',
						data:editDrag
					})
				}
				setTimeout(function(){
					uni.switchTab({
						url:'/pages/index/create'
					})
				},500)
			},
			deleteDrag(){
				let that = this;
				uni.showModal({
					content:'确定删除该接龙活动吗?',
					success:(async (rel)=>{
						if(rel.confirm){
							let data = await Api.apiCall('post',Api.apiName.remove_drag,{id:that.dragon_id});
							if(!data){
								return;
							}
							if(data.data==1){
								that.$api.msg(`删除成功`)
							}else{
								that.$api.msg(`删除失败`)
							}
							that.showOpMenu();
							setTimeout(function(){
								uni.switchTab({
									url:'/pages/index/index'
								})
							},2500)
						}
					})
				})
			},
			toExport(){
				uni.navigateTo({
					url:'/pages/record/statics?id='+this.dragon_id
				})
			},
			async exportData(){
				let data = await Api.apiCall('post',Api.apiName.create_drag_export,{dragon_id:this.dragon_id});
				if(!data){
					this.$api.msg(`导出数据异常，请联系管理员`);
					return;
				}
				this.$api.msg(`导出成功`)
				this.showOpMenu();
				setTimeout(function(){
					uni.navigateTo({
						url:'/pages/record/export?id='+this.dragon_id+'&download='+data.data.url+'&name='+data.data.name
					})
				},1500)
			},
			editDrag(){
				uni.navigateTo({
					url:'/pages/index/edit'
				})
			},
			endDrag(){
				let that = this;
				uni.showModal({
					content:'确定结束该接龙活动吗?',
					success:(async (rel)=>{
						if(rel.confirm){
							let data = await Api.apiCall('post',Api.apiName.purchase_end,{id:that.dragon_id});
							if(!data){
								return;
							}
							// that.show_mask=false;
							// that.show_menu=false;
							// that.drag_info.status_val=2;
							that.showOpMenu()
							that.drag_info.status_val=2;
							that.drag_info.status_tip='已结束';
							that.drag_info.purchase_status=1;
						}
					})
				})
			},
			async cancelOrder(orderId,index){
				let that = this;
				uni.showModal({
					title:'确定取消该接龙号的订单吗?',
					content:'订单取消后，退款金额将原路退回',
					success:(async (rel)=>{
						if(rel.confirm){
							let data = await Api.apiCall('post',Api.apiName.order_cancel,{oid:orderId,reason:'用户手动取消'});
							if(!data){
								return;
							}
							that.$api.msg(`取消成功`);
							that.list[index].status=-1;
						}
					})
				})
			},
			verifyOrder(orderId,index){
				let that = this;
				uni.showModal({
					title:'提示',
					content:'确定核销该接龙号的订单吗?',
					success:(async (rel)=>{
						if(rel.confirm){
							let data = await Api.apiCall('post',Api.apiName.verify_order,{oid:orderId});
							if(!data){
								return;
							}
							that.$api.msg(`核销成功`);
							that.list[index].verify=2;
						}
					})
				})
			},
			
		},

	}
</script>

<style lang='scss'>
	page{
		background: #F5F5F5;
	}
	button{
		/* background: none !important; */
		/* line-height: 40rpx !important; */
		/* font-size: 28rpx !important; */
	}
	button::after{
		/* border: none !important; */
	}
	.uv-keyboard__button-wrapper__button{
		height: 60rpx !important;
	}
	.container{
		display: flex;
		flex-direction: column;
		/* height: 100vh; */
	}
	.avatar{
		height: 140rpx;
		margin: 30rpx;
		border-radius: 10rpx;
		background: #FFFFFF;
		display: flex;
		image{
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}
	}
	.left-avatar{
		display: flex;
		flex:1;
		align-items: center;
		margin-left: 20rpx;
	}
	.name{
		margin-left:20rpx
	}
	.copy{
		border-radius: 32rpx;
		border: 1px solid #23A948;
		font-size: 28rpx;
		padding: 10rpx 20rpx;
		margin: 20rpx;
	}
	.right-copy{
		margin:42rpx 20rpx;
		display: flex;
		align-items: center;
		color: $font-color-main;
		font-size: $font-sm;
		border: 1px solid $font-color-main;
		border-radius: 30rpx;
		padding: 10rpx 29rpx;
	}
	.title{
		margin: 0rpx 30rpx;
		border-radius: 10rpx;
		background: #FFFFFF;
		position: relative;
	}
	.mar-left-20{
		margin-left: 20rpx;
	}
	.address{
		position: absolute;
		left: 10rpx;
		bottom: 20rpx;
		width: 60rpx;
		height: 60rpx;
		background: rgba(204 ,204 ,204,0.5);
		text-align: center;
		line-height: 60rpx;
		border-radius: 14rpx;
	}
	
	.diy-cell-class{
		padding: 8rpx 30rpx !important;
		margin: 20rpx;
		border-radius: 6rpx;
	}
	.clamp{
		color:#23A948 !important;
	}
	.goods{
		margin: 18rpx 30rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		video{
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	}
	.pd-20{
		padding: 20rpx 0rpx;
	}
	.b-bottom{
		border-bottom: 1px solid rgba(204,204,204,0.3);
	}
	.goods-title{
		font-size: 32rpx;
		color: #000000;
		font-weight: bold;
		flex: 1;
	}
	.width-75{
		width: 75%;
	}
	.width-50{
		width: 50%;
	}
	.width-60{
		width: 60%;
	}
	.width-40{
		width: 40%;
	}
	.margin-20{
		margin:10rpx 20rpx;
	}
	.disflex{
		display: flex;
	}
	.op-btn{
		padding: 5rpx 10px;
		border: 1px solid #999999;
		width: 110rpx;
		border-radius: 30rpx;
		text-align: center;
		font-size: 24rpx;
		margin-left: 10rpx;
		color:#999999;
	}
	.close{
		position: fixed;
		right: 10rpx;
		top: 10rpx;
		/* top:env(safe-area-inset-bottom); */
		width: 32rpx;
		height: 32rpx;
		background: #FFFFFF;
		border-radius: 50%;
		color: #000000;
		transform: rotate(45deg);
		font-size: 24rpx;
		line-height: 32rpx;
		text-align: center;
	}
	.player{
		position: absolute;
		top: 76rpx;
		left: 76rpx;
	}
	.add-btn{
		margin: 20rpx 30rpx 20rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		text-align: center;
		padding: 20rpx;
	}
	.group-set{
		margin: 0rpx 30rpx 160rpx;
		border-radius: 10rpx;
		background: #FFFFFF;
	}
	.date text{
		color:#000000 !important;
		text-align: right;
	}
	.bottom-btn{
		position: fixed;
		bottom: 0rpx;
		background: #FFFFFF;
		width: 100%;
		padding: 30rpx 20rpx;
		text-align: center;
		z-index: 2;
	}
	.btn{
		background: #23A948;
		border-radius: 8rpx;
		padding: 20rpx;
		color:#FFFFFF;
	}
	.date-input{
		float: left;
		width: 85%;
		font-size: 14px;
		text-align: right;
	}
	.right-icon{
		float: right;
		margin-right: 10px;
		margin-top: 2px;
		color:#ccc;
	}
	.cpt-mask{
		top:0rpx !important;
		/* background-color: rgba(0,0,0,1) !important;  
		opacity: 1 !important;  
		z-index: 3 !important; */  
	}
	.add_btn{
		color:$font-color-main;
		font-size: 28rpx !important;
	}
	.had{
		background: rgba(35,169,72,0.1);
		border:none;
		padding: 12rpx 30rpx;
	}
	.navbar{
		display: flex;
		height: 88rpx;
		padding:4rpx;
		position: relative;
		border-radius: 16rpx;
		margin: 10rpx 20rpx;
		z-index: 1;
		.nav-item{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: $font-base;
			color: $font-color-light;
			position: relative;
			.child_item{
				&.current{
					color: $font-color-main;
					font-size: $font-base;
					border-bottom: 4rpx solid $font-color-main;
					&:after{
						content: '';
						position: absolute;
						left: 50%;
						bottom: 0;
						transform: translateX(-50%);
						width: 88rpx;
						height: 0;
					}
				}
			}
		}
	}
	.bottom-list{
		margin: 30rpx 30rpx 204rpx 30rpx;
		/* margin: 30rpx; */
		border-radius: 10rpx;
		background: #FFFFFF;
		min-height: 240rpx;
	}
	.bottom-op{
		position: fixed;
		bottom: env(safe-area-inset-bottom);
		width: 100%;
		background: #FFFFFF;
		display: flex;
		padding: 10rpx 0rpx;
		z-index: 2;
		border-top: 1px solid #F5F5F5;
	}
	.safe-area{
		height: env(safe-area-inset-bottom);
		background: #FFFFFF;
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		z-index: 2;
	}
	.record{
		margin: 30rpx;
		font-size: 28rpx;
	}
	.goods-list{
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		padding: 10rpx;
		width: 100%;
		image{
			width: 40rpx;
			height: 40rpx;
		}
	}
	.goods-price{
		flex: 1;
		font-size: 40rpx;
		font-weight: bold;
		color:#FA6401;
	}
	.goods-num{
		/* padding: 0rpx 16rpx; */
		min-width: 80rpx;
		text-align: center;
	}
	.list-goods-tit{
		padding-left: 100rpx;
	}
	.list-goods-num{
		color: #999999;
		margin-left: 20rpx;
	}
	.order-list{
		display: flex;
		flex-direction: column;
		padding: 20rpx 0rpx;
	}
	.empty-order{
		margin-top: 50rpx;
		text-align: center;
		color: #999999;
		font-size: 28rpx;
	}
	.order-image{
		width: 44rpx;
		height: 44rpx;
		border-radius: 50%; 
		margin: 10rpx;
	}
	.order-btn{
		padding: 20rpx 44rpx;
		margin: 10rpx;
		border-radius: 8rpx;
		color:#FFFFFF;
		height: 80rpx;
	}
	.share{
		padding: 18rpx 42rpx;
		margin: 10rpx;
		border: 1px solid #23A948;
		color: #23A948;
		border-radius: 8rpx;
		background: #FFFFFF;
	}
	.more{
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx;
		border-top:1px solid rgba(204, 204, 204, 0.3);
	}
	.lu{
		border:1px solid #23A948;
		border-radius: 20rpx;
		color: #23A948;
		font-size:24rpx;
		width: 132rpx;
		height: 52rpx;
		text-align: center;
		line-height: 52rpx;
	}
	.bai{
		border:1px solid #cccccc;
		border-radius: 20rpx;
		color: #666666;
		font-size:24rpx;
		width: 132rpx;
		height: 52rpx;
		text-align: center;
		line-height: 52rpx;
	}
	.hui{
		border-radius: 20rpx;
		color: #666666;
		font-size:24rpx;
		background: rgba(102, 102, 102, 0.1);
		width: 132rpx;
		height: 52rpx;
		text-align: center;
		line-height: 52rpx;
	}
	.remark{
		padding-left: 100rpx;
		color:#666666;
		margin-top: 10rpx;
	}
	.bottom-left{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10rpx 30rpx;
		font-size: 28rpx;
	}
	.bottom_menu{
		position: fixed;
		bottom: env(safe-area-inset-bottom);
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		width: 100%;
		background: #FFFFFF;
		z-index: 2;
	}
	.op_menu_child{
		text-align: center;
		padding: 30rpx;
		border-bottom: 1px solid rgba(204,204,204,0.2);
	}
	.media{
		position: fixed;
		z-index: 3;
		left: 0;
		right: 0;
		height: 100%;
		/* top:env(safe-area-inset-bottom); */
		top: 0;
	}
	.pic_num{
		position: absolute; 
		bottom: 0rpx;
		right: 0rpx; 
		background: rgba(0,0,0,0.4);
		color:#FFFFFF;
		border-radius: 10rpx 0rpx 10rpx 0rpx;
		padding: 8rpx;
		font-size: 24rpx;
	}
	.share-list{
		display:flex;
		flex-wrap: wrap;
		background: #FFFFFF;
		margin-bottom: 114rpx;
		justify-content: center;
	}
	.share-item{
		min-width: 50%;
		display:flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 180upx;
		image{
			width: 80upx;
			height: 80upx;
			margin-bottom: 16upx;
		}
		text{
			font-size: $font-base;
			color: #333333;
			margin-top: 10rpx;
		}
	}
	.bottom-btn-share{
		position:absolute;
		left: 0;
		bottom: 0;
		display:flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 90upx;
		background: #fff;
		z-index: 9;
		font-size: $font-base + 2upx;
		color: $font-color-dark;
	}
	.share-btn{
		background-image: url('/static/temp/share_wechat.png');
		background-position: bottom;
		background-size: 80rpx 80rpx;
		height: 80rpx !important;
		line-height: 80rpx !important;
		background-repeat: no-repeat;
		width: 80rpx;
		border-radius: 50%;
	}
	.share_card{
		position: fixed;
		top: 10%;
		left: 0;
		right: 0;
		z-index: 3;
		background: #FFF;
		margin: 30rpx;
		border-radius: 10rpx;
	}
	.copy_btn{
		border: 1px solid #23A948;
		color:#23A948;
		font-size: 24rpx;
		padding:8rpx 10rpx;
		border-radius: 24rpx;
	}
</style>
